app/client/src/pages/Editor/IDE/EditorPane/components/SegmentedHeader.tsx (1)

14-16: Consider using design tokens for font weights

While the implementation is clean, consider using design tokens for font weights to maintain consistency across the application.

-  font-weight: ${(props) => (props.isSelected ? "500" : "normal")};
+  font-weight: ${(props) => (props.isSelected ? "var(--ads-v2-font-weight-bold)" : "var(--ads-v2-font-weight-normal)")};

app/client/src/pages/Editor/IDE/Sidebar.tsx (1)

29-30: Enhance comment clarity

The current comment could be more descriptive about the purpose and impact of this configuration.

-  // Updates the bottom button config based on datasource existence
+  // Modifies bottom navigation buttons to show warning state when no datasources exist

app/client/src/IDE/Components/Sidebar/SidebarButton/SidebarButton.tsx (2)

Line range hint 7-13: Consider creating a ticket for TODO items

There are multiple TODO comments about adding configurations for additional conditions.

Would you like me to create a GitHub issue to track the implementation of additional condition configurations?

---

48-51: Consider adding transition for smoother hover effect

The hover state could benefit from a smooth transition effect.

const IconContainer = styled.div<{ selected: boolean }>`
+  transition: background-color 0.2s ease;
   &:hover {
     background: var(--ads-v2-color-bg-subtle, #f1f5f9);
   }
`;

app/client/src/ce/entities/IDE/constants.ts (1)

Line range hint 69-89: Inconsistencies found in BottomButtons configuration

1. The DATA button uses title while LIBRARIES and SETTINGS use tooltip. This should be consistent across all buttons.
2. The DATA button incorrectly uses SidebarTopButtonTitles.DATA instead of a bottom button title.

Apply this diff to fix the inconsistencies:

 export const BottomButtons: IDESidebarButton[] = [
   {
     state: EditorState.DATA,
     icon: "datasource-v3",
-    title: SidebarTopButtonTitles.DATA,
+    tooltip: "Data",
     urlSuffix: "datasource",
   },
   {
     state: EditorState.LIBRARIES,
     icon: "packages-v3",
     tooltip: SidebarBottomButtonTitles.LIBRARIES,
     urlSuffix: "libraries",
   },
   {
     state: EditorState.SETTINGS,
     icon: "settings-v3",
     tooltip: SidebarBottomButtonTitles.SETTINGS,
     urlSuffix: "settings",
   },
 ];

Configuration used: .coderabbit.yaml
Review profile: CHILL

#!/bin/bash
# Description: Check the IDESidebarButton interface and its usage

# Check the interface definition
ast-grep --pattern 'interface IDESidebarButton {
  $$$
}'

# Check usage of BottomButtons
rg -A 5 'BottomButtons'

# Check if there are any direct references to title/tooltip properties
rg -A 2 'button\.(title|tooltip)'

#!/bin/bash
# Let's check the interface definition and related types
ast-grep --pattern 'interface IDESidebarButton'

# Check for EditorState enum definition
ast-grep --pattern 'enum EditorState'

# Check for SidebarTopButtonTitles and SidebarBottomButtonTitles
ast-grep --pattern 'enum SidebarTopButtonTitles'
ast-grep --pattern 'enum SidebarBottomButtonTitles'

# Check for any other components using similar button structure
rg -A 3 'IDESidebarButton\[\]'

#!/bin/bash
# Let's check the actual interface definition to verify type safety
rg -A 10 'interface IDESidebarButton'

# Check for any type errors or issues in the implementation
rg -A 2 'type.*error|Type.*error' app/client/src/ce/entities/IDE/

app/client/src/IDE/Components/Sidebar/Sidebar.tsx (2)

Line range hint 18-23: Consider enhancing the interface documentation.

The IDESidebarButton interface could benefit from JSDoc comments explaining the purpose of each property, especially state and urlSuffix.

+/**
+ * Interface for IDE sidebar button configuration
+ * @property state - The editor state this button represents
+ * @property urlSuffix - The URL suffix for navigation
+ * @property testId - Unique identifier for testing
+ */
 export interface IDESidebarButton
   extends Omit<SidebarButtonProps, "onClick" | "selected"> {
   state: EditorState;
   urlSuffix: string;
 }

---

Line range hint 33-69: Consider implementing error boundaries for the sidebar navigation.

Since this is a core navigation component, it would be beneficial to implement error boundaries to gracefully handle any rendering failures.

Would you like me to provide an example implementation of an error boundary component for the sidebar?

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

app/client/src/IDE/Components/Sidebar/SidebarButton/SidebarButton.tsx (1)

48-54: Consider consolidating hover styles

The hover styles could be simplified by using CSS custom properties for the background colors.

-  &[data-selected="false"] {
-    background-color: white;
-
-    &:hover {
-      background-color: var(--ads-v2-color-bg-subtle, #f1f5f9);
-    }
-  }
+  &[data-selected="false"] {
+    background-color: var(--ads-v2-color-bg-default, white);
+
+    &:hover {
+      background-color: var(--ads-v2-color-bg-subtle);
+    }
+  }

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

app/client/packages/design-system/ads/src/Templates/EntityExplorer/EditorSegments/EditorSegments.styles.ts (2)

8-14: LGTM! Consider adding documentation.

The implementation correctly uses CSS variables and data attributes for state management.

Consider adding a brief comment explaining the styling decision:

+ // Bold text in selected segments for better visual hierarchy
.ads-v2-segmented-control__segments-container-segment {
  &[data-selected="true"] {
    span {
      font-weight: var(--ads-v2-font-weight-bold);
    }
  }
}

---

8-14: Consider enhancing accessibility with hover and focus states.

The selected state is well-handled, but the component could benefit from additional interactive states.

 .ads-v2-segmented-control__segments-container-segment {
+  &:hover {
+    background-color: var(--ads-v2-color-bg-subtle);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--ads-v2-color-border-emphasis);
+    outline-offset: -2px;
+  }
   &[data-selected="true"] {
     span {
       font-weight: var(--ads-v2-font-weight-bold);
     }
   }
 }

app/client/src/pages/Editor/IDE/EditorPane/components/SegmentSwitcher.tsx (1)

11-29: Consider further optimizations for the segmentOptions.

While the useMemo implementation is good, consider these improvements:

1. Since the options are static, they could be moved outside the component
2. Adding TypeScript interfaces would improve type safety

+interface SegmentOption {
+  label: string;
+  startIcon: string;
+  value: EditorEntityTab;
+}

+const SEGMENT_OPTIONS: SegmentOption[] = [
+  {
+    label: createMessage(EDITOR_PANE_TEXTS.queries_tab),
+    startIcon: "queries-line",
+    value: EditorEntityTab.QUERIES,
+  },
+  // ... rest of the options
+];

const SegmentSwitcher = () => {
  // ... other code
-  const segmentOptions = useMemo(() => {
-    return [
-      // ... options
-    ];
-  }, []);
+  const segmentOptions = SEGMENT_OPTIONS;

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

app/client/packages/design-system/ads/src/SegmentedControl/SegmentedControl.styles.tsx (1)

Line range hint 90-99: Consider simplifying the complex selector for better maintainability.

While the separator implementation works, the selector complexity (&:not(:hover):not(:last-child):not([data-selected="true"]):not(:has(+ [data-selected="true"]))) might make future maintenance challenging.

Consider extracting the separator logic into a separate styled component or using a simpler approach:

-  &:not(:hover):not(:last-child):not([data-selected="true"]):not(
-      :has(+ [data-selected="true"])
-    ):after {
+  &:after {
     content: "";
     position: absolute;
     right: 0;
     width: 1px;
     height: 16px;
     background-color: var(--ads-v2-colors-control-field-default-border);
+    opacity: 0;
   }
+
+  &:not(:hover):not(:last-child):not([data-selected="true"]):not(
+    :has(+ [data-selected="true"])
+  ):after {
+    opacity: 1;
+  }

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro